<template>
  <confirm-dialog
    :title="title"
    :visible="visible"
    :loading="loading"
    @handleClose="handleClose"
    width="25%"
  >
  <template slot="content">
    <p>{{content}}</p>
    <ul v-if="Array.isArray(data)">
      <li v-for="(item, index) in data" :key="index">{{item.name ? item.name : usbFamilyName(item.usb_family_name) + '/' + item.vendor_name + '/' + item.product_name}}</li>
    </ul>
    <ul v-else>
      <li>{{data.name}}</li>
    </ul>
  </template>
  <template slot="footer">
    <el-button @click="handleClose">{{$t('common.cancel')}}</el-button>
    <el-button :disabled="loading" type="primary" @click="submit">{{$t('common.confirm')}}</el-button>
  </template>
  </confirm-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import ConfirmDialog from '../../../components/Dialog/confirmDialog.vue';
export default Vue.extend({
  components: {
    FormDialop,
    ConfirmDialog
  },
  props: {
    submitMethod: {
      type: Function,
      default() {
        return (formData: any) => Promise.resolve();
      }
    }
  },
  data() {
    return {
      title: '',
      visible: false,
      loading: false,
      content: '',
      data: {},
      action: ''
    }
  },
  methods: {
    handleClose () {
      this.visible = false;
      this.loading = false;
    },
    usbFamilyName(val: any) {
      let usb_family_name: any = '';
      if (val) {
        let isletter = /.*[\u4e00-\u9fa5]+.*$/.test(val);
        if (!isletter) {
          usb_family_name = this.$t(`policy.usbFamily.${val}`);
        } else {
          usb_family_name = val;
        }
      }
      return usb_family_name;
    },
    init (obj: any) {
      this.visible = true;
      this.data = obj.data as any;
      this.action = obj.type;
      switch (obj.type) {
        case 'USBRuleGroup':
          this.title = this.$t("policy.DeleteUSBRuleGroup").toString();
          this.content = this.$t("policy.message.deleteUSBRuleGroup").toString();
          break;
        case 'USBRule':
          this.title = this.$t('policy.DeleteUSBRules').toString();
          this.content = this.$t("policy.message.deleteUSBRule").toString()
      }
    },
    submit () {
      this.loading = true;
      let promiseArray: any = [];
      if (this.action === 'USBRuleGroup') {
        (this.data as any).forEach((item: any) => {
          promiseArray.push((this as any).$pandaApi.apiDeleteUsbRuleGroup(item.id));
        })
      } else {
        (this.data as any).forEach((item: any) => {
          promiseArray.push((this as any).$pandaApi.apiDeleteUsbRule(item.group, item.id));
        })
      }
      Promise.all(promiseArray).then(res => {
        this.loading = false;
        this.visible = false;
        this.$emit('success');
        this.$message({
            message: this.$t('policy.message.operationUSBRuleSuc', {operation: this.title }).toString(),
            type: 'success'
        });
      }).catch(() => {
        this.loading = false;
        this.$message({
          message: this.$t('policy.message.operationUSBRuleFail', {operation: this.title }).toString(),
          type: 'warning'
        });
      })
    }
  }
})
</script>
